<script setup>
import TestVue from '@/view/test.vue'//src目录下的文件的路径可以以@开头
import Test2Vue from '@/view/test2.vue'
import Test3Vue from './test3.vue';

import {ref} from 'vue'
const text=ref('我是在home.vue定义的一个数据模型')
</script>
<template>
    <hr>
    <p>我是引用含有slot标签的vue的home.vue</p>
    <TestVue>
        <div>
            <p>
                我是向test.vue传递HTML
            </p>
            <p>{{ text }}</p>
        </div>
        我是向test.vue传递的文本
    </TestVue>
    <TestVue></TestVue>

    <hr>
    <Test2Vue>
        <template v-slot:myHeader>
            <p>我是传递给test2.Vue中指定了name="myHeader"的插槽的内容,我必须被template标签包裹</p>
        </template>
        
        
        <template v-slot:myFooter>
            <p>我是传递给Test2.Vue中指定了name="myFooter"的插槽的内容,注意使用v-slot="myFooter"这种方式有可能会报错，不再深究</p>
        </template>

        <template v-slot:default>
            <p>我是传递给test2.vue中的默认插槽的内容，我可以不被template包裹</p>
        </template>
      
    </Test2Vue>

    <Test2Vue>
        <template #myHeader>
            <p>我演示了具名插槽的缩写(v-slot:替换为#)</p>
        </template>
        <template #default>
            <p>我演示了默认插槽的缩写形式</p>
        </template>
    </Test2Vue>
<hr>
    <Test3Vue>
        <template v-slot:Test3="{myData}"><!--或#Test3="{myData}"-->
            <p>{{ myData }}</p>
        </template>
    </Test3Vue>
</template>
<style>
</style>
